<template>
  <div>
    <nav-bar>
      <img class="left" slot="left" src="../../../assets/img/navbar/ic_title_back.png" alt="" @click="$router.back()">
      <span slot="center">提现记录</span>
    </nav-bar>
    <div class="content_fixed">
    <ul class="content_box">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
        <li class="list_item" v-for="(item, index) in list" :key="index" @click="itemClick(index)">
          <div class="list_title">
            <span>{{item.bankname}}</span>
            <span :style="{color: item.status === '3' ? '#ff0000': '#4152E5'}" class="list_status">
              <i v-if="item.status === '1'">审核中</i>
              <i v-else-if="item.status === '2'">成功</i>
              <i v-else-if="item.status === '3'">失败</i>
            </span>
          </div>
          <div class="list_data">
            <span class="list_time">{{item.addtime | fnDate}}</span>
            <span class="list_amount">{{'+' + item.amount}}</span>
          </div>
        </li>
      </van-list>
    </ul>
    <div class="footer_img" v-show="!list"></div>
    </div>
  </div>
</template>

<script>
import jutils from 'jutils-src'
import NavBar from '@/components/common/navbar/NavBar.vue'
import { getUserCashList } from '../../../network/home'
  export default {
    name: 'WithdrawalDetails',
    components: { NavBar },
    data() {
      return {
        list: [],
        loading: true,
        finished: false,
        page: 1,
        scrollTop: '',
      }
    },
    beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.querySelector('.content_box').scrollTop
    console.log(this.scrollTop)
    next()
  },
  activated() {
    const top = document.querySelector('.content_box')
    top.scrollTo(0, this.scrollTop);
  },
    created () {
      this.getUserList()
    },
    methods: {
      getUserList() {
        getUserCashList(this.page).then(res => {
          if (res.state === "ok") {
            this.list = [...this.list, ...res.data.list];
            this.loading = false;
            if (res.data.list.length < 12) {
              this.finished = true;
            }
            console.log(res);
        } else if (res.msg === "no_login") {
          this.$router.replace("/login");
        }
        })
      },
      onLoad() {
        this.page++;
        this.getUserList();
      },
      itemClick(index) {
        if (this.list[index].status === '3') {
          this.$toast('提现失败，请联系对接专员！')
        }else{
          this.$router.push({
            path: '/specific_data',
            query: {
              info: this.list[index]
            }
          })
        }
      }
    },
    filters: {
      fnDate: function(date) {
        // YYYY-MM-DD HH:ii:ss
        return jutils.formatDate(new Date(date*1000),"YYYY-MM-DD HH:ii:ss")
      }
    }
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_box {
  box-sizing: border-box;
  width: 750px;
  padding: 0 35px;
  border-bottom: 10px solid #ededed;
}

.list_item {
  width: 680px;
  height: 120px;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid #ededed;
}

.list_title {
  color: #333;
  line-height: 30px;
  font-size: 30px;
  display: flex;
  justify-content: space-between;
}

.list_data {
  line-height: 40px;
  font-size: 40px;
  display: flex;
  justify-content: space-between;
}

.list_status {
  font-size: 24px;
}

.list_time {
  position: relative;
  margin-left: 30px;
  color: #999;
  font-size: 24px;
}

.list_time::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -25px;
  width: 20px;
  height: 20px;
  background: url('../../../assets/img/withdrawal/ic_cash_time.png') no-repeat;
  background-size: 100%;
}

.list_amount {
  color: #4152E5;
  font-weight: 500;
}

.footer_img {
  margin: 50px 0;
  width: 750px;
  height: 100px;
  background: url('../../../assets/img/apply/ic_empty_footer.png') no-repeat;
  background-size: 100%;
}


</style>